<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #cc_content {
        width: 500px;
        height: 800px;
        overflow: auto;
      }
      .content_9 {
        width: 100%;
        height: 300px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="cc_content">
      <p class="c_p_first">123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p class="content_9">9999999999999999999999999999999999999999</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p class="c_p_last">123</p>
    </div>
    <script>
      const myObserver = new IntersectionObserver(
        (entries, observer) => {
          entries.forEach((entry) => {
            console.log(entry);
            // 相当于是否进入视口
            if (entry.isIntersecting) {
              const target = entry.target;
              // intersectionRatio: 目标元素的可见比例
              let visiblePct = Math.floor(entry.intersectionRatio * 100) + '%';
              console.log(visiblePct, entry);
            }
          });
        },
        {
          /*
            threshold属性决定了什么时候触发回调函数,即元素进入视口（或者容器元素）多少比例时,执行回调函数。
            它是一个数组,每个成员都是一个门槛值,默认为[0],即交叉比例（intersectionRatio）达到0时触发回调函数。
            如果threshold属性是0.5,当元素进入视口50%时,触发回调函数。
            如果值为[0.3, 0.6],则当元素进入30%和60%时触发回调函数。
            1 的话就是当元素100%都展示出来的时候执行回调   
        */
          threshold: [0, 0.3, 0.5, 1],
        }
      );
      const dom = document.querySelector('.content_9');
      // 为这个dom添加观察方法
      myObserver.observe(dom);
      setTimeout(() => {
        // 停止观察
        myObserver.observe(dom);
        // 关闭观察器
        myObserver.disconnect();

        console.log('停止了');
      }, 3000);
    </script>
  </body>
</html>
